<template>
  <div>
    <to-back :title="'添加分类'" @update-page="updatePage">
      <template v-slot:btn>
        <el-button @click="goback">
          <i class="el-icon-arrow-left"></i>
          返回
        </el-button>
      </template>
    </to-back>
    <div class="globelbox">
      <div class="tabletitle">
        <div class="tabletitleleft">
          <span>添加分类</span>
        </div>
      </div>

      <el-form ref="form" :model="fromData" :rules="rules" label-width="410px" label-position="right">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="fromData.name"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" prop="parentId">
          <el-select v-model="fromData.parentId" placeholder="请选择分类">
            <el-option v-for="(item, i) in sortSelect" :key="i + '1000'" :label="item.name" :value="item.parentId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="seq">
          <el-input v-model.number="fromData.seq"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isShow">
          <el-radio v-model.number="fromData.isShow" :label="0">是</el-radio>
          <el-radio v-model.number="fromData.isShow" :label="1">否</el-radio>
        </el-form-item>
        <el-form-item label="是否显示在导航栏" prop="isMenu">
          <el-radio v-model.number="fromData.isMenu" :label="0">是</el-radio>
          <el-radio v-model.number="fromData.isMenu" :label="1">否</el-radio>
        </el-form-item>
        <el-form-item label="选择模板" prop="templateId">
          <el-select v-model="fromData.templateId" placeholder="请选择模板">
            <el-option v-for="(item, i) in templateSelect" :key="i + '10000'" :label="item.name" :value="item.templateId"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fromData: {
        name: '',
        parentId: '',
        seq: 1,
        isShow: 0,
        isMenu: 0,
        templateId: ''
      },
      sortSelect: '',
      templateSelect: '',
      rules: {
        name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 7, message: '长度在 2 到 7 个字符', trigger: 'blur' }
        ],
        parentId: [{ required: true, message: '请选择上级分类', trigger: 'change' }],
        seq: [{ type: 'number', required: true, message: '请输入分类排序', trigger: 'blur' }],
        isShow: [{ required: true, message: '请选择是否显示' }],
        isMenu: [{ required: true, message: '请选择是否显示在导航栏' }],
        templateId: [{ required: true, message: '请选择模板', trigger: 'change' }]
      }
    }
  },
  methods: {
    updatePage() {
      alert('父组件收到了')
    },
    async getSortSelect() {
      const { data: res } = await this.$axios.get('/goods/getAddress')
      console.log(res, '下拉1')

      if (res.code !== 200) return this.$message.error('获取下拉框数据失败')
      this.sortSelect = res.data
    },
    async getTemplateSelect() {
      const { data: res } = await this.$axios.get('/goods/template')
      console.log(res, '下拉2')

      if (res.code !== 200) return this.$message.error('获取下拉框数据失败')
      this.templateSelect = res.data
    },
    // 当用户点击返回时
    goback() {
      this.$router.go(-1)
    },
    async onSubmit() {
      this.$refs.form.validate(async res => {
        if (res) {
          console.log(this.fromData)
          const { data: res } = await this.$axios.post('/goods/add', this.fromData)
          if (res.code !== 200) return this.$message.error('添加失败')
          this.$message.success('添加成功')
        } else {
          return false
        }
      })
    }
  },
  created() {
    this.getSortSelect()
    this.getTemplateSelect()
  }
}
</script>

<style lang="less" scoped>
.tabletitle {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-top: 15px;
  background: #f3f3f3;
}

.el-form {
  margin-top: 40px;
  width: 50%;
}
</style>
